How to Add Icon Fonts in your WordPress Theme the Right Way
March 23rd, 2017 | by Ravi Chahar || 5 Comments |
Nowadays, WordPress users are curious about the use of vector icons. Have you ever asked your WordPress developer to add icon fonts in your WordPress theme?
Whenever you visit a website, you may see many vector social icons which can be redesigned if you have expertise in CSS.
Have you ever tried to show a download button with a vector icon? It can be possible if your theme has an inbuilt font icon feature.
In this tutorial, you will learn many ways to add icon fonts in your WordPress theme.
Add Icon Fonts Using A WordPress Plugin.
Not all WordPress users are so techie and they need something simple and effective.
Install and activate Better Font Awesome plugin. After installation, go to Settings>>Better Font Awesome and you will see the plugin’s setting.
It has an option to use the minify CSS to keep the size of the markup optimized. It’s important to maintain the speed of your website.
You will see many shortcodes below the checkboxes. These type of shortcodes can be directly used in your WordPress post editor.
To add icon fonts, just open your old post or a new post and you will see an “Insert Icon” button beside the Add Media button.
Click on that button and you will see many vector icons. Choose it according to your requirement and you will see the shortcode in your post editor.
For every icon, you will see a different shortcode.
You can use it for your all the posts. Whenever you show a download button, just pick the download vector icon. If you’re good with CSS, you can also change the size of these icons.
Adding Icon Fonts Manually.
There are many websites which allow you to generate the vector icons and add them to your website.
Whether you copy their CSS and put it your WordPress theme stylesheet or you can add their default code. Some websites like Font Awesome allow their users to link the icons to their CDN.
Let me show you how.
Add this code in the <head> section of your website. Whether you add it by editing the header.php file or use a plugin.
I have a complete guide to add custom code in WordPress header and footer area.
This method is a kind of tricky and can conflict with any of your plugins. You can use this until you don’t face any problem.
Instead of linking the stylesheet to the CDN using the header section, you can create a new function to enqueue it.
Don’t you know how to add CSS file in your WordPress theme?
You have to edit the functions.php file of your theme. Whether you access it from the cPanel or directly from your WordPress admin area.
Navigate to Appearance>>Editor>>functions.php file.
Add this code and save.
function bl_font_awe() {
wp_enqueue_style(‘wpb-fa’,’http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘bl_font_awe’ );
If you’re good with WordPress codes, you can modify the function or you can copy and paste it in the functions.php file.
You have successfully added the stylesheet of Font Awesome to your WordPress theme. Now you have to show the icons in your posts and pages.
Displaying the Icon Fonts to your WordPress Website.
Just like the shortcodes shown in the plugin, you have to create those shortcodes from the Font Awesome website for the icon you want to add.
Go to Font Awesome website where you will see hundreds of vector icons. Either you search or scroll down to find the icon you want.
Click on that icon and it will show you a shortcode. Copy that code.
Now go to your WordPress post editor and paste that shortcode. The icon you have chosen will see on your website. You can see the preview of your blog post.
It will work either you have linked the CSS in the header or enqueued it from the functions.php file.
If you see the vector icon, congrats, you have successfully displayed it. From onwards, you can copy the shortcode of any icon and use it in your blog posts and pages.
I hope you can easily add icon fonts in your WordPress theme.
It seems to be complicated but it’s not. You just need to add the code in the theme file and you will be up for adding the vector icons to your posts.
In most of the cases, people like to link the stylesheet to the head because it’s easy. But it’s recommended to use the functions.php file to enqueue the stylesheet.
Can you now add icon fonts in your WordPress theme? If you still have any doubt, feel free to drop a comment.
You can also connect with us on LinkedIn, Twitter, and Facebook.
Related Posts
5 comments
Leave a Reply
Thank you for the guides, I am sure that they will become useful for me. While I am a content creator for my blog, I may want to break away in the near future to build a blog on WordPress.
Hey Ravi,
There is no doubt that humans are very visual beings. And as such, we focus not only on the content, but on the visual design of a website as well.
Traditionally, web designers and developers around the world used images and image sprites to include icons on any website. Fantastic tutorial and it will enhance the users experience. Thanks for sharing.
With best wishes,
Amar kumar
Hi Amar,
User experience is everything. For a web designer, it’s important to focus on these basic things. Adding the font icons can enhance the design.
Many people have started to use it.
Thanks for stopping by.
~Ravi
Great tips! I love using font awesome in my projects as it adds a little flair to your content. Glad you showed both ways of adding it. I find doing it without the plugin the best because then you don’t have to worry about short codes.
Chris
Hey Chris,
It’s the matter of choice. Not all the people are the super techie to accomplish such tasks without a plugin. They should be provided with the better methods.
I am glad you could resonate.
Have a great week ahead.
~Ravi